<template>
    <div class="search-box">
        <div class="city">西安</div>
        <div class="search-input">
            <img class="logo" src="../assets/logo.png">
            <span class="shugang"></span>
            <span class="iconfont icon-fangdajing"></span>
            <input type="text" placeholder="立柜式空调" />
        </div>
        <div class="login" @click="submit">登录</div>
    </div>
</template>

<script>
    export default{
        name:"Search",
        methods:{
            submit(){
                this.$router.push("/login")
            }
        }
    }
</script>

<style scoped>
@import url(../assets/iconfonts/iconfont.css);


.search-box{
    width: 100%;
    height: 3.3333rem;
    display: flex;
    justify-content: space-around;
    background-color: #f66;
    align-items: center;
    color: #fff;
}

.search-box div{
    height: 100%;
    line-height: 3.3333rem;
    text-align: center;
}
/* rem是相对单位，是相对于它的父亲来讲的 */
.city,.login{
    width: 3.75rem;
}
.search-input{
    flex: 1;
    position: relative;
}
.logo{
    position: absolute;
    left:.6667rem;
    top: 50%;
    transform: translateY(-50%);
}
.shugang{
    position: absolute;
    display: block;
    height: 1.5rem;
    border-left:2px solid gray;
    left:3.75rem;
    top: 50%;
    transform: translateY(-50%);
}
.icon-fangdajing{
    position: absolute;
    font-size: 1.3333rem;
    color: gray;
    left: 4.1667rem;
    top: 50%;
    transform: translateY(-50%);
}
.search-input input{
    width: 100%;
    height: 1.6667rem;
    border-radius: 1.6667rem;
    border: none;
    margin-top: -5px;
    padding-left: 6rem;
    box-sizing: border-box;
    color: gray;
}
</style>